import React, { Fragment,useState } from 'react';
import { Layout, Menu, Breadcrumb, Icon } from 'antd';
import "../../styles/pages/admin_index.css"
import { BrowserRouter as Router, Route } from "react-router-dom";
import AddArticle from './article/'
import ArticleList from './article/list'
const { Header, Content, Footer, Sider } = Layout;

const SubMenu = Menu.SubMenu
const AdminIndex = (props) => {
  const [collapsed,setCollapsed]  = useState(false)
  const onCollapse = collapsed => {
    setCollapsed(collapsed);
  };
  const manageMenuHandle = (key)=>{
    if(key === "articleList"){
      props.history.push("/article/list")
    }else if(key === "publishArticle"){
      props.history.push("/article/")
    }else if(key === "addArticle"){
      props.history.push("/article/add")
    }
  }
  return (
    <Fragment>
      <Layout style={{ minHeight: '100vh' }}>
        <Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
          <div className="logo">
            <Icon type="sketch" /><span>blog</span>
          </div>
          <Menu theme="dark" defaultSelectedKeys={['addArticle']} mode="inline"
            onClick = {
              (e)=>{manageMenuHandle(e.key)}
            }
          >
            <Menu.Item key="1">
              <Icon type="pie-chart" />
              <span>工作台</span>
            </Menu.Item>
            <Menu.Item key="addArticle">
              <Icon type="desktop" />
              <span>添加文章</span>
            </Menu.Item>
            <SubMenu
              key="manageArticle"
              title={
                <span>
                  <Icon type="user" />
                  <span>文章管理</span>
                </span>
              }
              onClick = {
                (e)=>{manageMenuHandle(e.key)}
              }
            >
              <Menu.Item key="articleList">文章列表</Menu.Item>
              <Menu.Item key="publishArticle">发布文章</Menu.Item>
            </SubMenu>
            <SubMenu
              key="sub2"
              title={
                <span>
                  <Icon type="team" />
                  <span>留言管理</span>
                </span>
              }
            >
              <Menu.Item key="6">留言列表</Menu.Item>
              <Menu.Item key="8">留言分类</Menu.Item>
            </SubMenu>
          </Menu>
        </Sider>
        <Layout>
          {/* <Header style={{ background: '#fff', padding: 0 }} /> */}
          <Content style={{ margin: '0 16px' }}>
            <Breadcrumb style={{ margin: '16px 0' }}>
              <Breadcrumb.Item>文章管理</Breadcrumb.Item>
              <Breadcrumb.Item>文章列表</Breadcrumb.Item>
            </Breadcrumb>
            <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
              <Route exact path="/article/" component={AddArticle} />
              <Route exact path="/article/add/:id" component={AddArticle} />
              <Route exact path="/article/list" component={ArticleList} />
            </div>
          </Content>
          <Footer style={{ textAlign: 'center' }}>liangzhenmeng @ jishupang</Footer>
        </Layout>
      </Layout>
    </Fragment>
  );
}
export default AdminIndex